import store from '@/store';

export const imgerr = {
  // inserted 是指令的钩子函数，当绑定该指令的元素被插入后触发
  inserted(el, options) {
    // 当图片加载失败时，会触发 onerror 事件
    el.onerror = () => {
      // options.value 是绑定该指令时对应的值（等号后面的）
      let { value } = options;

      console.log('图片加载失败。。。', el.src, value);

      if (!value.endsWith('/')) {
        value += '/';
      }
      // if (value.substr(-1) !== '/') {
      //   value += '/';
      // }

      // 如果 value 和 当前的 el.src 一毛一样，就不用赋值了
      if (el.src !== value) {
        el.src = value;
      }

      // if (!  new RegExp(`^${el.src}?$`).test(value)) {
      //   el.src = value;
      // }
      // 第1次触发 onerror  el.src  http://hehe.jpg/   value   http://xixi.jpg
      // 第2次触发  onerror el.src  http://xixi.jpg/   value   http://xixi.jpg
      // 第3次触发  onerror el.src  http://xixi.jpg/   value   http://xixi.jpg
      // 第4次触发  onerror el.src  http://xixi.jpg/   value   http://xixi.jpg
      // 第5次触发  onerror el.src  http://xixi.jpg/   value   http://xixi.jpg
      // 第6次触发  onerror el.src  http://xixi.jpg/   value   http://xixi.jpg
    };
  },
};
function getHook(type) {
  return function btnCheckHook(el, binding, vNode) {
    // console.log('[ el, binding, vnode ]-40', el, binding, vNode);
    // console.log(type, 'type');

    if (!store.state.user.userInfo?.base.roles.points.includes(binding.value)) {
      // 看用户在使用时，是否添加了 disabled 修饰符
      if (binding.modifiers.disabled) {
        vNode.componentInstance.disabled = true;
      }
      // 默认就显示隐藏
      else {
        el.remove();
        // el.style.display = 'none'
      }
    }
  };
}

// v-btnCheck
// v-btn-check
// 小驼峰的指令名称，在使用时，上述两种方式都支持
export const btnCheck = {
  // inserted 只会执行一次
  inserted: getHook('inserted'),
  // 这个 指令所在组件的 VNode 及其子 VNode 全部更新后调用。
  componentUpdated: getHook('componentUpdated'),
};
